<template>

  <div>
    <div class="registerinfor">
      <p><font color="#6495ed">请输入想注册的名称,如 <b>zhangsan</b></font></p>
      <input id="cui" type="text" placeholder="输入注册名称" v-model="username">

      <p @click="register()">
        <button class="shuang_button">点击注册</button>
      </p>

      <p><font color="#6495ed">密钥为: </font></p>
      <input id="shuang" type="text" placeholder="密钥" v-model="userpass">

    </div>
  </div>
</template>

<script>

export default {
  name: 'Register',
  methods: {
    register () {
      window.console.log(this.username, this.userpass)
      this.$http({
        method: 'post',
        url: '/api',
        data: {
          name: this.username
        }
      }).then((response) => {
        // vue中的then方法 https://blog.csdn.net/weixin_39225682/article/details/107254797
        console.log(response)
        this.userpass = response.data
      })
      setTimeout(function () {
        alert('注册成功,请复制密钥,进行激活')
      }, 500)
    }
  },
  data () {
    return {
      username: this.username,
      userpass: this.userpass
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

#cui {
  width: 200px;
  height: 30px;
}

#shuang {
  width: 200px;
  height: 30px;
}

.shuang_button {
  color: darkred;
  background: aquamarine;
  font-size: 20px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
